<template>
  <div class="card" :style="{ width, height }">
    <div class="card-top-border"></div>
    <slot />
    <div class="card-bottom-border"></div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Card",
});
defineProps({
  width: {
    type: String,
    default: "100%",
  },

  height: {
    type: String,
    default: "100%",
  },
});
</script>

<style scoped lang="scss">
.card {
  background-color: url("../../assets/images/line.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid var(--border-color-100);

  position: relative;
}

// scss 语法定义混合 -- 复用样式
@mixin border($position1, $position2) {
  content: "";
  display: block;
  position: absolute;
  #{$position2}: 0;
  #{$position1}: 0;
  width: 10px;
  height: 10px;
  border-#{$position1}: 1px solid var(--border-color-200);
  border-#{$position2}: 1px solid var(--border-color-200);
}

.card-top-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  &:before {
    @include border(top, left);
  }
  &:after {
    @include border(top, right);
  }
}

.card-bottom-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  &:before {
    @include border(bottom, left);
  }
  &:after {
    @include border(bottom, right);
  }
}
</style>
